<template>
	<view class="">
		<!-- <uni-popup ref="orderPopup" safe-area> -->
			<view class="server-order-popup">
				<image class="close-icon" src="../../static/login/clear.png" mode=""></image>
				<view class="inner-content">
					<view class="server-info">
						<image class="server-img" :src="massageOrderInfo.image" mode=""></image>
						<view class="server-desc">
							<view class="title">{{massageOrderInfo.name}}</view>
							<view class="prcie">
								{{massageOrderInfo.price}}<text>元/次</text>
							</view>
							<view class="num-box">
								x1
								<!-- <uni-number-box background="#E4E5E7" :min="1" :max="9" :value="nums"  @change="inputChange"/> -->
							</view>
						</view>
					</view>
				</view>
				<view class="addres-content" v-if="addressData && addressData.id" @click="chooseAddress">
					<view class="addres-info">
						<view class="address-text">
							<text>{{addressData.province ? addressData.province + '-' : ''}}</text>
							<text>{{addressData.city ? addressData.city + '-' : ''}}</text>
							<text>{{addressData.district ? addressData.district + '-' : ''}}</text>
							<text>{{addressData.address || ''}}</text>
						</view>
						<view class="user-info">
							<view style="margin-right: 16rpx;">{{addressData.real_name}}</view>
							<view>{{addressData.mobile}}</view>
						</view>
					</view>
					<uni-icons type="right" size="18" color="#939393" ></uni-icons>
				</view>
				<view class="addres-content" v-else @click="chooseAddress">
					<view class="addres-info" style="padding: 20rpx 0;">
						请先选择地址信息
					</view>
					<uni-icons type="right" size="18" color="#939393" ></uni-icons>
				</view>
				
				<view class="inner-content">
					<view class="top-lines" @click="chooseTime">
						<view class="box-title">
							服务时间
						</view>
						<view class="right-time">
							<view class="time">{{selectiveTime.alldate}} {{selectiveTime.week}} {{selectiveTime.time}}</view>
							<uni-icons type="right" size="18" color="#939393" ></uni-icons>
						</view>
					</view>
				</view>
				<view class="inner-content"  v-if="voucherLength>0">
					<view class="top-lines" @click="tovoucher">
						<view class="box-title">
							代金券
						</view>
						<view class="right-time" v-if="voucher.reduction_price">
							<view class="price" style="color: #EF5233;font-weight: 500;">-{{voucher.reduction_price}}¥</view>
							<uni-icons type="right" color="#939393" size="18"></uni-icons>
						</view>
						<view class="right-time" v-else>
							<view class="price" style="color: #EF5233;font-weight: 500;">选择优惠券</view>
							<uni-icons type="right" color="#939393" size="18"></uni-icons>
						</view>
					</view>
				</view>
				 <!-- v-if="payInfo.price" -->
				<view class="inner-content" >
					<view class="top-lines" style="margin-bottom: 20rpx;">
						<view class="box-title">
						{{payInfo.is_night ? '夜间交通费':'远程交通费'}}	 <text class="cost-hint">( {{payInfo.free_distance}}公里起收: 来程{{payInfo.distance}}公里)</text>
						</view>
						<view class="right-time">
							<view class="price" style="margin-right: 6rpx;">¥{{payInfo.initial_distance_price || '0.00'}}</view>
							<!-- <uni-icons type="right" color="#fff" size="18"></uni-icons> -->
						</view>
					</view>
					<u-table color="#919293" font-size="24">
						<u-tr>
							<u-td>＜1km</u-td>
							<u-td>免费</u-td>
						</u-tr>
						<u-tr>
							<u-td>1-3km</u-td>
							<u-td>14元</u-td>
						</u-tr>
						<u-tr>
							<u-td>＞3km</u-td>
							<u-td>每公里3元</u-td>
						</u-tr>
						<u-tr>
							<u-td>夜间服务时间交通费翻倍</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="inner-content">
					<view class="top-lines">
						<view class="box-title">
							服务人员
						</view>
					</view>
					<view class="technician-info">
						<view class="technician">
							<image class="technician-img" :src="selectiveTechnician.work_clothes_image?selectiveTechnician.work_clothes_image:''" mode="aspectFill"></image>
							<view class="right-technician-info">
								<view class="user-name">{{selectiveTechnician.technician_nickname || selectiveTechnician.real_name}}</view>
								<view class="age-address">
									<view style="margin-right: 10rpx;">{{selectiveTechnician.age}}</view>
									<!-- <view>{{selectiveTechnician.city}}</view> -->
								</view>
								<view class="distance">
									<image :src="$util.imgurl('/imgs/massage/address.png')" mode=""></image>
									<view>{{payInfo.distance || 0}}km</view>
								</view>
							</view>
						</view>
						<view class="huan-content" @click="choosePeople">
							<image :src="$util.imgurl('/imgs/massage/huan.png')" mode=""></image>
							<view>重新选人</view>
						</view>
					</view>

				</view>
				<view class="inner-content">
					<view class="top-lines">
						<view class="box-title">
							订单备注
						</view>
					</view>
					<view class="order-comments">
						<textarea name="" id="" v-model="desc" adjust-position cols="30" rows="50"></textarea>
					</view>
				</view>
				
			</view>
			<view class="right-pay" @click="$util.msg('请先选择服务地址')" v-if="!payInfo.distance || !payInfo.radius">
				<button style="background: #ccc;">请先选择服务地址</button>
			</view>
			<view class="right-pay" @click="$util.msg('距离过远  不可预约')" v-else-if="Number(payInfo.distance) > payInfo.radius">
				<button style="background: #ccc;">距离过远 不可预约</button>
			</view>
			<view class="right-pay" v-if="Number(payInfo.distance) <= payInfo.radius && payInfo.price">
				<button @click="trueCreatorder" :disabled="flag">立即支付 {{payInfo.price}}元</button>
			</view>
		<!-- </uni-popup> -->
		<uni-popup ref="addresspopup" type="bottom">
			<view style="background-color: #fff;height: 90vh;">
				<addressList @addressResult="addressResult"></addressList>
			</view>
		</uni-popup>
		<changeTechnician ref="changetechnician"></changeTechnician>
		<u-modal v-model="show" @confirm="chooseAddress" :content="'请添加地址'"></u-modal>
	</view>
</template>

<script>
	import publicData from './public.js'
	import { mapState } from 'vuex'//引入mapState
	export default {
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		data() {
			return {
				nums: 1,
				current:0,
				payInfo:{},
				selectiveTechnician:{},
				selectiveTime:{},
				massageOrderInfo:{},
				addressData:{},
				voucher:{},
				desc:"",
				location:{},
				isAddress:0,
				show:false,
				voucherLength:0,
				defaultAddress:{},
				
				flag:false,
			}
		},
		onReady() {
		},
	 	onLoad(option) {
			this.id = option.id
			this.getVoucher()
			this.location = uni.getStorageSync('location');
			this.getAddress().then(()=>{
				this.creatOrder()
			})
		},
		onShow() {
			this.massageOrderInfo = getApp().globalData.massageOrderInfo
			this.selectiveTime = publicData.selectiveTime
			this.selectiveTechnician = publicData.selectiveTechnician
			// this.voucher = publicData.selectiveTiket
			if(this.defaultAddress && this.defaultAddress.id){
				this.creatOrder()
			}
		},
		methods: {
			inputChange(data){
				this.nums = data
				this.creatOrder()
			},
			addressResult(data){
				this.addressData = data
				this.$refs.addresspopup.close()
				this.creatOrder()
			},
			chooseAddress(){
				this.show = false
				this.$refs.addresspopup.open('bottom')
			},
			choosePeople(){
				if(!this.addressData || !this.addressData.id){
					return this.$util.msg('请先添加服务地址')
				}
				uni.navigateTo({
					url:'/otherpages/search/searchDetail?type=0&id='+this.id+'&lat='+this.addressData.lat+'&lng='+this.addressData.lng
				})
			},
			chooseTime(){
				if(!this.addressData || !this.addressData.id){
					return this.$util.msg('请先添加服务地址')
				}
				uni.navigateTo({
					url:'/otherpages/massage/time?id='+this.id+'&technician_id='+this.selectiveTechnician.id+'&lat='+this.addressData.lat+'&lng='+this.addressData.lng
				})
			},
			tovoucher(){
				uni.navigateTo({
					url:'/otherpages/massage/voucher?id='+(this.voucher.user_ticket_id?this.voucher.user_ticket_id:'')+'&money='+this.massageOrderInfo.price
				})
			},
			creatOrder(type){
				if(!this.addressData || !this.addressData.id){
					return this.$util.msg('请先添加服务地址')
				}
				if(type == 2 && !this.addressData.id){
					this.show = true
					return 
				}else if(type == 1 && !this.addressData.id){
					return
				}
				var that = this
				var obj = {
					day:this.selectiveTime.day,
					service_id: this.massageOrderInfo.service_id?this.massageOrderInfo.service_id:this.id, 
					service_spec_id:this.massageOrderInfo.spec_id?this.massageOrderInfo.spec_id:this.massageOrderInfo.id,
					num:this.nums,
					address_id: this.addressData.id,
					technician_id:this.selectiveTechnician.id,
					user_ticket_id:this.voucher&&this.voucher.user_ticket_id?this.voucher.user_ticket_id:'',
					time:this.selectiveTime.time,
					lng: this.addressData.lng, //
					lat: this.addressData.lat,
				}
				this.request.httpTokenRequest({
					url: "order/getPrice",
					method: "post"
				}, obj).then(function(data) {
					if (data.code == 0) {
						that.payInfo = data.data
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			trueCreatorder(){
				if(!this.addressData || !this.addressData.id){
					return this.$util.msg('请先添加服务地址')
				}
				var that = this
				this.flag = true
				var obj = {
					day:this.selectiveTime.day,
					service_id: this.massageOrderInfo.service_id?this.massageOrderInfo.service_id:this.id, 
					service_spec_id:this.massageOrderInfo.spec_id?this.massageOrderInfo.spec_id:this.massageOrderInfo.id,
					num:this.nums,
					address_id: this.addressData.id,
					technician_id:this.selectiveTechnician.id,
					user_ticket_id:this.voucher && this.voucher.user_ticket_id?this.voucher.user_ticket_id:'',
					time:this.selectiveTime.time,
					remark:this.desc,
					lng: this.addressData.lng, 
					lat: this.addressData.lat,
					store_id:this.selectiveTechnician.store_id
				}
				this.request.httpTokenRequest({
					url: "order/createServiceOrder",
					method: "post"
				}, obj).then(function(data) {
					if (data.code == 0) {
						that.toPay(data.data.order_id)
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			toPay(order_id){
				let that = this
				uni.navigateTo({
					url:'/otherpages/pay/pay?order_id='+order_id,
					success() {
						that.flag = false
					}
				})
			},
			getAddress(type){
				var that = this
				return new Promise((resolve, reject) => {
					this.request.httpTokenRequest({
						url: "user_address/index",
						method: "post"
					}, {}).then(function(data) {
						if (data.code == 0) {
							that.defaultAddress = data.data.data[0]
							that.addressData = data.data.data[0]
							if(data.data.data.length<1){
								that.show = true
								reject()
								return
							}
							resolve()
						} else {
							this.$util.msg(data.msg)
						}
					})
				});
				
			},
			getVoucher(){ //获取代金券
				var that = this
				this.request.httpTokenRequest({
					url: "ticket/myTicket",
					method: "post"
				}, {}).then(function(data) {
					if (data.code == 0) {
						that.voucherLength = data.data.data.length
					} else {
				
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.server-order-popup {
		background-color: #F5F7F8;
		padding: 30rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-bottom: 160rpx;
		.close-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: -100rpx;
			left: 0;
		}
		.inner-content {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.server-info {
			display: flex;
			align-items: flex-start;

			.server-img {
				width: 160rpx;
				height: 214rpx;
				flex: 0 0 auto;
			}

			.server-desc {
				margin-left: 21rpx;
				flex: 0 1 auto;
				width: 100%;
				.title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #0F0807;
				}

				.prcie {
					display: flex;
					align-items: baseline;
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EF5233;
					margin-top: 29rpx;

					text {
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EC2700;
					}
				}
				.num-box {
					margin-top: 29rpx;
					margin-left: 4rpx;
					color: #666;
				}
			}
		}
	}

	.addres-content {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		align-items: center;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/address-bg.png')no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30rpx;

		.addres-info {
			.address-text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #151616;
			}

			.user-info {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #151616;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			}
		}
	}
	.uni-table-td{
		color: #919293 !important;
		font-size: 24rpx !important;
		height: 50rpx !important;
		padding: 0 !important;
	}
	//
	.top-lines {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cost-hint {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #919293;
		}

		.right-time {
			display: flex;
			align-items: center;

			.price {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #0F0807;
				margin-right: 29rpx;
			}

			.time {
				height: 46rpx;
				background: #FDE5E4;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EF5233;
				padding: 0 18rpx;
				line-height: 46rpx;
				margin-right: 29rpx;
			}
		}
	}

	//
	.technician-info {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.technician {
		height: 139rpx;
		box-sizing: border-box;
		width: fit-content;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: rgba(239, 82, 51, 0.1);
		border-radius: 14rpx;
		border: 1rpx solid #EF5233;
		margin-right: 20rpx;

		.technician-img {
			width: 80rpx;
			height: 100rpx;
			flex: 0 0 auto;
		}

		.right-technician-info {
			flex: 0 0 auto;
			margin-left: 20rpx;

			.user-name {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EF5233;
			}

			.age-address {
				display: flex;
				align-items: center;
				margin: 10rpx 0;

				view {
					height: 26rpx;
					background: rgba(239, 82, 51, 0.2);
					border-radius: 6rpx;
					padding: 0 8rpx;
					font-size: 20rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #EF5233;
					line-height: 26rpx;

				}
			}

			.distance {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #EF5233;
				display: flex;
				align-items: center;

				image {
					width: 13rpx;
					height: 16rpx;
				}
			}

		}
	}

	//
	.huan-content {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #0F0807;
		width: 170rpx;
		height: 139rpx;
		background: #F5F6F7;
		border-radius: 14rpx;
		text-align: center;
		padding-top: 29rpx;

		image {
			width: 39rpx;
			height: 40rpx;

		}
	}

	//
	.order-comments {
		background-color: #F9FAFB;
		margin-top: 30rpx;
		height: 160rpx;
		padding: 24rpx;
		textarea{
			font-size: 24rpx;
		}
	}
	//
	.paytype{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		.paytype-lines{
			display: flex;
			align-items: center;
			width: 300rpx;
			height: 104rpx;
			background: #F5F6F7;
			border-radius: 20rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #0F0807;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 14rpx;
			}
		}
	}
	.right-pay{
		height: 120rpx;
		background: #FEFFFF;
		box-sizing: border-box;
		padding-top: 16rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		button{
			border: 0;
			border-color: rgba(0, 0, 0, 0);
		}
		button{
			width: 690rpx;
			height: 88rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>